import React from 'react'
import { Form, Input,Icon,Col, Button, message } from 'antd'

const FormItem = Form.Item

import  config from '../assets/config';
class myForm extends React.Component {
    constructor(props) {
        super(props)

    }

    handleSubmit=(e) => {
        e.preventDefault();
        this.props.form.validateFields((errors, values) => {
          if (!!errors) {
            console.log('Errors in form!!!');
            return;
        }
        fetch(config.base+"user/login",{
            method: 'POST',
            mode: config.cors,
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body:config.postBody(values)
        })
        .then(res=>{return res.json()})
        .then(rep=>{
        if(rep.status==200){
                message.success(rep.message)
                sessionStorage.user=values.nickname;
                window.location.href='#/';
            }else{
                message.error(rep.message)
            }
        })
        .catch((e)=>{
            console.log(e.message);
            message.error("网络错误请稍后重试");
            callback()
        })
        this.props.form.resetFields()
      });
    }
    checkuser (rule, value, callback) {
        fetch(config.base+"user/check",{
                method: 'POST',
                mode: config.cors,
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body:"nickname="+value
            })
            .then(res=>{return res.json()})
            .then(rep=>{
            if(rep.status==201){
                    callback()
                }else{
                    callback(rep.message)
                }
            })
            .catch((e)=>{
                console.log(e.message);
                message.error("网络错误请稍后重试");
                callback()
            })
    }
    render() {
        const { getFieldProps, getFieldError, isFieldValidating } = this.props.form;
        const formItemLayout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 24 }
        }
        return (
        	<div className="loginbg">
        	<div className="loginBox">
        	<img src='src/assets/images/logo.png' width="50" id="logo"/>
            <Form horizontal onSubmit={this.handleSubmit} >
            <FormItem
            id="nickname"
            {...formItemLayout}
            hasFeedback>

            <Input  id="nickname" addonBefore={<Icon type="user" />} placeholder="用户名"
              {...getFieldProps('nickname', {
                       rules: [
                       { required: true, message: '请填写用户名' },
                       { validator: this.checkuser}
                       ]
                   })}  />

            </FormItem>

            <FormItem
            id="password"
            {...formItemLayout}
            hasFeedback>

            <Input  id="password" addonBefore={<Icon type="lock" />} placeholder="密码"  type="password"
                {...getFieldProps('password', {
                     rules: [
                     { required: true, message: '请填写密码' },
                     ]
                 })} />

            </FormItem>


            <FormItem  style={{ marginTop: 24 }}>
            <Button  type="primary" htmlType="submit" className="login-form-button">
            登录
            </Button>
            </FormItem>

            </Form>
            </div>
            </div>
            )
    }
}

myForm = Form.create()(myForm)

export default myForm